<template>
    <div class="app-container calendar-list-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="用户名" v-model="listQuery.name">
            </el-input>

            <el-button class="filter-item" type="primary" v-waves icon="search" @click="onFilter">搜索</el-button>
            <el-button class="filter-item" type="primary" v-waves icon="upload" @click="asyncUser">同步钉钉用户</el-button>
        </div>

        <!-- 列表 -->
        <el-table :data="list" v-loading="listLoading" element-loading-text="加载中，请稍后" border fit highlight-current-row style="width: 100%">

            <el-table-column align="center" label="姓名" width="100">
                <template scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="职位">
                <template scope="scope">
                    <span>{{scope.row.position}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="email" width="150">
                <template scope="scope">
                    <span>{{scope.row.email}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="电话" width="120">
                <template scope="scope">
                    <span>{{scope.row.mobile}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="部门">
                <template scope="scope">
                    <el-select multiple :disabled="!scope.row.edit" v-model="scope.row.depts" placeholder="请选择">
                        <el-option v-for="item in depts" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="150">
                <template scope="scope">
                    <el-button v-show="!scope.row.edit" size="small" type="success" @click='scope.row.edit=!scope.row.edit'>编辑
                    </el-button>
                    <el-button v-show="scope.row.edit" size="small" type="danger" @click='scope.row.edit=!scope.row.edit'>取消
                    </el-button>
                    <el-button v-show="scope.row.edit" size="small" type="success" @click="onSave(scope.row)">完成
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
                :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import api from '@/api/user'
    import roleApi from '@/api/role'
    import waves from '@/directive/waves/index.js' // 水波纹指令
    import _ from 'lodash'

    export default {
        name: 'user',
        directives: {
            waves
        },
        data() {
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 20,
                    name: '',
                },
                depts: []
            }
        },
        async created() {
            await this.getDepts()

            await this.getList()
        },
        methods: {
            async getList() {
                this.listLoading = true
                let response = await api.page({
                    name: {
                        $like: `%${this.listQuery.name}%`
                    }
                })
                for (let item of response.data.rows) {
                    item.edit = false
                    let depts = item.department.split(',') || []

                    depts = _.filter(depts, t => t)

                    depts = _.map(depts, t => Number(t) )

                    item.depts = depts

                }
                this.listLoading = false
                this.list = response.data.rows
                this.total = response.data.count
            },
            async getDepts() {
                let ret = await api.findDept()
                this.depts = ret.data
            },
            onFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            onSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            onCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            async onSave(row) {
                let ret = await api.setRole({ userid: row.userid, department: row.depts.join(',') })
                if (ret.success) {
                    row.edit = !row.edit
                    this.$notify({
                        title: '成功',
                        message: '设置成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList()
                }
            },
            async asyncUser() {
                let ret = await api.asyncUser()
                if (ret.success) {
                    this.$notify({
                        title: '成功',
                        message: '同步成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList()
                }
            }
        }
    }

</script>
